<template>
  <div class="create-post-page">
    <h4>{{route.query.id ? '编辑文章' : '新建文章'}}</h4>
    <validate-form @form-submit="onFormSubmit">
      <div class="mb-3">
        <label class="form-label">文章标题：</label>
        <validate-input
          :rules="titleRules" v-model="titleVal"
          placeholder="请输入文章标题"
          type="text"
        />
      </div>
      <div class="mb-3">
        <label class="form-label">文章详情：</label>
        <validate-input
          rows="10"
          tag="textarea"
          placeholder="请输入文章详情"
          :rules="contentRules"
          v-model="contentVal"
        />
      </div>
      <template #submit>
        <button class="btn btn-primary btn-large">
          {{route.query.id  ? '更新文章' : '发表文章'}}
        </button>
      </template>
    </validate-form>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue'
import { useStore } from 'vuex'
import { useRouter, useRoute } from 'vue-router'

import {GlobalDataProps,PostProps} from '@/store/index'

import ValidateInput,{RuleProps} from '@/components/validateInput/validateInput.vue'
import ValidateForm from '@/components/ValidateForm/ValidateForm.vue'



export default defineComponent({
  name: 'CreatePost',
  components: {
    ValidateInput,
    ValidateForm
  },
  setup() {
    const uploadedData = ref()
    const titleVal = ref('')
    const router = useRouter()
    const route = useRoute()
    const store = useStore<GlobalDataProps>()
    store.commit('setUnAbleCreate',false)
    const titleRules: RuleProps = [
      { type: 'required', message: '文章标题不能为空' }
    ]
    const contentVal = ref('')
    const contentRules: RuleProps = [
      { type: 'required', message: '文章详情不能为空' }
    ]
    onMounted(() => {
      console.log('onMounted......');
      
    })
    
   
    
    const onFormSubmit = (result: boolean) => {
      console.log('onFormSubmit...',result);
      
      if (result) {
        const columnData = store.getters.getCurrentColumn()
        const {_id} = columnData
        const tiem = new Date()
        const day = tiem.getDate()
        const month = tiem.getMonth() + 1
        const year = tiem.getFullYear()
        const H = tiem.getHours()
        const m = tiem.getMinutes()
        const s = tiem.getSeconds()

        let newData:PostProps = {
          _id: tiem.valueOf() + '1' ,
          title: titleVal.value,
          content: contentVal.value,
          // imgurl: 'http://vue-maker.oss-cn-hangzhou.aliyuncs.com/vue-marker/5ee1980819f4ae08ac78d458.png?x-oss-process=image/resize,m_fill,m_pad,w_200,h_110',
          createdAt: `${year}-${month}-${day} ${H}:${m}:${s}`, // 时间
          column: _id
        } 
        store.commit('setPostsData',newData)
        router.push({
          path: '/columnDetail',
          query: {
            id: _id
          }
        })
      }
    }
    
    return {
      titleRules,
      titleVal,
      contentVal,
      contentRules,
      onFormSubmit,
      uploadedData,
      route
    }
  }
})
</script>
<style>
.create-post-page .file-upload-container {
  height: 200px;
  cursor: pointer;
  overflow: hidden;
}
.create-post-page .file-upload-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.uploaded-area {
  position: relative;
}
.uploaded-area:hover h3 {
  display: block;
}
.uploaded-area h3 {
  display: none;
  position: absolute;
  color: #999;
  text-align: center;
  width: 100%;
  top: 50%;
}
</style>
